<template>
	<view class="editPassword">
		<u-form :model="form" ref="uForm" class="form">
			<u-form-item label="手机号" label-width="150"><u-input disabled input-align="right" v-model="user_mobile" /></u-form-item>
			
			<u-form-item label-position="left" label="验证码" prop="code" label-width="150">
				<u-input :border="false" placeholder="请输入验证码" v-model="form.yzm_code" type="text"></u-input>
				<u-button slot="right" class="code" type="success" hover-class="none" size="mini" @click="getCode">{{codeTips}}</u-button>
			</u-form-item>
			
			<u-form-item label="新密码" label-width="150"><u-input type="password" placeholder="请输入新密码" v-model="form.password" :clearable="false" /></u-form-item>
			<u-form-item label="确认密码" label-width="150"><u-input type="password" placeholder="请再次输入新密码" v-model="form.y_password" :clearable="false"/></u-form-item>
		</u-form>
		
		<view class="btnBox">
			<u-button class="btn" hover-class="none">确认修改</u-button>
		</view>
	
		<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user_mobile: '15896932156',
				form: {
					yzm_code: '',
					password: '',
					y_password: ''
				},
				codeTips: ''
			}
		},
		methods: {
			codeChange(text) {
				this.codeTips = text;
			},
			// 获取验证码
			getCode() {
				if(this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码',
						mask: true
					});
					this.$refs.uCode.start();
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
		}
	}
</script>

<style scoped>
.editPassword {
	background-color: var(--bgColor);
	height: 100%;
}
.form {
	background-color: #FFFFFF;
	padding: 0 32rpx;
}
.btnBox {
	margin-top: 40rpx;
}
.btnBox .btn{
	margin: 0 32rpx;
	color: #FFFFFF;
	background: var(--btnBgColor);
}
.code {
	background-color: var(--primaryColor);
}
</style>
